<template>
  <div class="w-100" style="height: 90%">
    <div
      id="zs_szy"
      class="w-100"
      style="height: 100%; position: relative"
    ></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import barY from "@/assets/image/underGround/ball.png";
const props = defineProps({
  szyData: {
    type: Object,
    default: () => [],
  },
  selectValue: {
    type: Number,
    default: 2024,
  },
});
watch(
  () => props.selectValue,
  (newValue, oldValue) => {
    setTimeout(() => {
      getData(newValue);
    }, 20)
  }
);
const getData = (value: any) => {
  const data = props.szyData[value]
    .sort((a: any, b: any) => a.value - b.value)
    .map((item: { name: any; value: any }, index: number) => ({
      name: item.name,
      value: item.value,
      symbolSize: [100, 100],
      symbol: "image://" + barY,
      draggable: true,
      label: {
        normal: {
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
      },
    }));
  myChart.setOption({
    series: [{
        data
      }]
    })
};
let option: any = {
  tooltip: {},
  color: ["#59EBE8", "#f29701"],
  animationDuration: 10000000, // 动画持续时间，单位毫秒
  animationEasing: "linear", // 缓动效果，线性的匀速运动
  series: [
    {
      type: "graph",
      layout: "force",
      force: {
        repulsion: 100, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
        edgeLength: 10, //边的两个节点之间的距离，值越小则长度越长，这个距离也会受                                             repulsion影响。
        gravity: 0.05, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
        layoutAnimation: true, //初始化时转动动画
      },
      label: {
        show: true,
        formatter: ["{a|{c}}", "{b|{b}}"].join("\n"),
        fontWeight: "1000",
        fontSize: "18",
        align: "center",
        verticalAlign: "center",
        rich: {
          a: {
            color: "#59EBE8",
            fontSize: 18,
            lineHeight: 20,
            textBorderColor: "transparent",
            textBorderWidth: 0,
          },
          b: {
            color: "#59EBE8",
            fontSize: 14,
            lineHeight: 20,
            textBorderColor: "transparent",
            textBorderWidth: 0,
          },
        },
      },
      data: [],
    },
  ],
};
var myChart: any;
onMounted(() => {
  let data: any = [];
  let arr = props.szyData[props.selectValue].sort(
    (a: any, b: any) => a.value - b.value
  );
  arr.map((item: any, index: any) => {
    data.push({
      name: item.name,
      value: item.value,
      symbolSize: [100, 100],
      symbol: "image://" + barY,
      draggable: true,
      label: {
        normal: {
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
      },
    });
  });
  console.log(data, " props.szyData");

  myChart = echarts.init(document.getElementById("zs_szy") as HTMLDivElement);
  option.series[0].data = data;
  myChart.setOption(option);
  (option as any).series = [];
  setInterval(() => {
    // myChart.setOption(option)
    var randomDuration = Math.floor(Math.random() * 2000) + 1000; // 生成 1000 到 3000 毫秒之间的随机持续时间
    var randomEasing = ["linear", "easeInOut", "elasticOut"][
      Math.floor(Math.random() * 3)
    ]; // 随机选择缓动效果

    myChart.setOption({
      series: [
        {
          animationDuration: randomDuration, // 随机持续时间
          animationEasing: "bounceOut", //randomEasing // 随机缓动效果
        },
      ],
    });
  }, 2000);
});
</script>

<style></style>
